<template>
  <div>
    <a-button type="primary" @click="showAddForm">新增</a-button>
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      @change="handleTableChange"
      :row-key="record => record.id"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="showEditForm(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定要删除吗?" @confirm="() => onDelete(record)">
          <a>删除</a>
        </a-popconfirm>
      </span>
      <span slot="imagePath" slot-scope="text, record">
        <img v-for="v in getImgList(text)" width="50" :src="imgBase + '/' + v" />
      </span>
    </a-table>

    <a-modal :visible="modalVisible" @ok="handleOk" @cancel="handleCancel" :title="isEdit ? '编辑' : '新增'">
      <a-form :form="form" layout="horizontal" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="帐户类别">
          <a-select
            v-decorator="[
              'acountType',
              {
                rules: [{ required: true, message: '请选择帐户类别!' }],
              },
            ]"
          >
            <a-select-option value="0">一般账户</a-select-option>
            <a-select-option value="1">个人账户</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="银行帐号">
          <a-input v-decorator="['bankAcount', { rules: [{ required: false, message: '请输入银行帐号!' }] }]" />
        </a-form-item>
        <a-form-item label="开户行全称">
          <a-input v-decorator="['bankName', { rules: [{ required: true, message: '请输入开户行全称!' }] }]" />
        </a-form-item>
        <a-form-item label="基本户开户支行号">
          <a-input v-decorator="['bankNo', { rules: [{ required: true, message: '请输入基本户开户支行号!' }] }]" />
        </a-form-item>
        <a-form-item label="发证日期">
          <a-date-picker v-decorator="['fazhengDate', { rules: [{ required: false, message: '请选择发证日期!' }] }]" />
        </a-form-item>

        <a-form-item label="上传扫描件">
          <j-upload v-decorator="['imagePath', { rules: [{ required: false }] }]"></j-upload>
        </a-form-item>
        <a-form-item label="主体代码">
          <a-input v-decorator="['legalCode', { rules: [{ required: false, message: '请输入主体代码!' }] }]" />
        </a-form-item>
        <a-form-item label="开户日期">
          <a-date-picker
            v-decorator="['startDate', { rules: [{ required: false, message: '请选择开户日期!' }] }]"
            format="YYYY-MM-DD"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {
  Modal,
  Form,
  Input,
  DatePicker,
  Upload,
  Button,
  Icon,
  message,
  Table,
  Popconfirm,
  Divider,
} from 'ant-design-vue'
import moment from 'moment'
import { axios } from '@/utils/request'
import { tableImgMixin, tableMixin } from './mixin'

export default {
  name: 'bank9',
  mixins: [tableMixin, tableImgMixin],
  components: {
    AModal: Modal,
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
    ADatePicker: DatePicker,
    AUpload: Upload,
    AButton: Button,
    AIcon: Icon,
    ATable: Table,
    APopconfirm: Popconfirm,
    ADivider: Divider,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      modalVisible: false,
      isEdit: false,
      currentRecord: {},
      data: [], // 这里应该是从后端获取的数据
      columns: [
        {
          title: '帐户类别',
          dataIndex: 'acountType',
          key: 'acountType',
          customRender: text => this.getAccountTypeName(text),
        },
        { title: '银行帐号', dataIndex: 'bankAcount', key: 'bankAcount' },
        { title: '开户行全称', dataIndex: 'bankName', key: 'bankName' },
        { title: '基本户开户支行号', dataIndex: 'bankNo', key: 'bankNo' },
        { title: '发证日期', dataIndex: 'fazhengDate', key: 'fazhengDate' },

        { title: '上传扫描件', dataIndex: 'imagePath', key: 'imagePath', scopedSlots: { customRender: 'imagePath' } },
        { title: '主体代码', dataIndex: 'legalCode', key: 'legalCode' },
        { title: '开户日期', dataIndex: 'startDate', key: 'startDate' },
        { title: '操作', scopedSlots: { customRender: 'action' }, key: 'action' },
      ],
    }
  },
  props: {
    legalCode: String,
  },
  created() {
    this.getData()
  },
  methods: {
    getAccountTypeName(typeCode) {
      const accountTypes = {
        0: '一般账户',
        1: '个人账户',
      }
      return accountTypes[typeCode] || ''
    },
    showAddForm() {
      this.modalVisible = true
      this.isEdit = false
      this.currentRecord = {}
      this.form.resetFields()
    },
    showEditForm(record) {
      this.modalVisible = true
      this.isEdit = true
      this.currentRecord = { ...record }
      this.$nextTick(() => {
        this.form.setFieldsValue(this.currentRecord)
      })
    },
    hideForm() {
      this.modalVisible = false
    },
    async getData() {
      try {
        const response = await this.$http.get('/register/subjectLegalAcount/list', {
          params: { legalCode: this.legalCode, pageSize: this.pagination.pageSize, pageNo: this.pagination.current },
        })
        this.data = response.result.records
        this.pagination.total = response.result.total
      } catch (error) {
        console.error('获取用户列表失败:', error)
      }
    },
    handleOk(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          let url
          values.legalCode = this.legalCode
          if (this.isEdit) {
            values.id = this.currentRecord.id

            url = '/register/subjectLegalAcount/edit'
          } else {
            url = '/register/subjectLegalAcount/add'
          }
          const obj = values
          Object.keys(obj).forEach(k => {
            if (Array.isArray(obj[k])) {
              obj[k] = obj[k].join()
            }
          })
          axios.post(url, obj).then(r => {
            this.hideForm()
            this.getData()
          })
        }
      })
    },
    handleCancel() {
      this.hideForm()
    },
    onDelete(record) {
      axios.delete('/register/subjectLegalAcount/delete?id=' + record.id).then(r => {
        this.$message.success('删除成功')
        this.getData()
      })
    },
  },
}
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>
